<template>
    <view class="uni-tab-bar">
        <scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
            <view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']"
                :id="tab.id" :data-current="index" @tap="tapTab">{{tab.name}}</view>
        </scroll-view>
        <swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
			<!-- 科目一 -->
            <swiper-item >
                <scroll-view class="list" scroll-y>
					<view class="subject_top">
						<view class="left">
							<view class="ul">
								<view class="li iconfont icon-icon"></view>
								<view class="p">我的课程</view>
							</view>
							<view class="ul">
								<view class="li iconfont icon-shequ-active"></view>
								<view class="p">资讯公告</view>
							</view>
							<view class="ul">
								<view class="li iconfont icon-shezhi"></view>
								<view class="p">学习闹钟</view>
							</view>
							<view class="ul">
								<view class="li iconfont icon-zhibo-01"></view>
								<view class="p">直播</view>
							</view>
						</view>
						
						<view class="midle">
							<view class="yuan" @tap="sequential_practice">
								<text class="text1">顺序练习</text>
								<text class="text2">0/1333</text>
							</view>
							<view class="yuan">
								<text class="text1">模拟考试</text>
								<text class="text2">100%仿真</text>
							</view>
						</view>
						<view class="right">
							<view class="ul">
								<view class="li iconfont icon-qingnianjiaoshijiaoxuejinengjingsaishenbao"></view>
								<view class="p">课程</view>
							</view>
							<view class="ul">
								<view class="li iconfont icon-huojiang"></view>
								<view class="p">报班</view>
							</view>
							<view class="ul">
								<view class="li iconfont icon-wurenjiashi"></view>
								<view class="p">考试</view>
							</view>
							<view class="ul">
								<view class="li iconfont icon-icon"></view>
								<view class="p">扫一扫</view>
							</view>
						</view>
					</view>
                </scroll-view>
            </swiper-item>
			<!-- 科目二 -->
			<swiper-item >
				<scroll-view class="list" scroll-y>
					2222
				</scroll-view>
			</swiper-item>
			<swiper-item >
				<scroll-view class="list" scroll-y>
					33333
				</scroll-view>
			</swiper-item>
			<swiper-item >
				<scroll-view class="list" scroll-y>
					44444
				</scroll-view>
			</swiper-item>
        </swiper>
    </view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more.vue'
    export default {
        components: {
			uniLoadMore
        },
        data() {
            return {
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
                scrollLeft: 0,
                isClickChange: false,
                tabIndex: 0,
                tabBars: [{
                    name: '科一',
                    id: 'keyi'
                }, {
                    name: '科二',
                    id: 'keer'
                }, {
                    name: '科三',
                    id: 'kesan'
                }, {
                    name: '科四',
                    id: 'kesi'
                }]
            }
        },
        onLoad: function() {
            
        },
		// 监听下拉刷新
		onPullDownRefresh(){
			setTimeout(function () {
				uni.stopPullDownRefresh();//停止刷新
			}, 1000);
		},
        methods: {
			//顺序练习
			sequential_practice(){
				uni.navigateTo({
					url:"./../exam_practice/exam_practice"
				})
			},
			
            async changeTab(e) {
                let index = e.target.current;
				console.log(index)
                if (this.isClickChange) {
                    this.tabIndex = index;
                    this.isClickChange = false;
                    return;
                }
                let tabBar = await this.getElSize("tab-bar"),
                    tabBarScrollLeft = tabBar.scrollLeft;
                let width = 0;

                for (let i = 0; i < index; i++) {
                    let result = await this.getElSize(this.tabBars[i].id);
                    width += result.width;
                }
                let winWidth = uni.getSystemInfoSync().windowWidth,
                    nowElement = await this.getElSize(this.tabBars[index].id),
                    nowWidth = nowElement.width;
                if (width + nowWidth - tabBarScrollLeft > winWidth) {
                    this.scrollLeft = width + nowWidth - winWidth;
                }
                if (width < tabBarScrollLeft) {
                    this.scrollLeft = width;
                }
                this.isClickChange = false;
                this.tabIndex = index; //一旦访问data就会出问题
            },
            getElSize(id) { //得到元素的size
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },
            async tapTab(e) { //点击tab-bar
                if (this.tabIndex === e.target.dataset.current) {
                    return false;
                } else {
                    let tabBar = await this.getElSize("tab-bar"),
                        tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
                    this.scrollLeft = tabBarScrollLeft;
                    this.isClickChange = true;
                    this.tabIndex = e.target.dataset.current
                }
            },
        }
    }
</script>

<style scoped="scoped" lang="scss">
@import"./driving_test_book.scss";
</style>